@import '../color.scss';

.zhui-checkbox {
  &-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 1;
  }

  &-input {
    position: absolute;
    width: 15px;
    height: 19px;
    opacity: 0;
    z-index: 1;
    margin: 0;

    + .zhui-checkbox-inner {
      position: relative;
      display: inline-block;
      width: 15px;
      height: 19px;
      border-radius: 41%;
      box-shadow: inset 0px 0px 10px 7px $yuanshan;
      transition: all .3s linear;

      &::before, &::after {
        position: absolute;
        content: '';
      }

      &:before {
        top: -3px;
        left: 4px;
        width: 7px;
        height: 5px;
        border-radius: 100%;
        background: #493E44;
        z-index: -1;
      }
  
      &:after {
        background: #493E44;
        width: 7px;
        height: 3px;
        top: 18px;
        left: 4px;
        z-index: -1;
      }
    }

    &:checked + .zhui-checkbox-inner {
      background-color: #ff0;
      box-shadow: inset 0px 0px 10px 3px rgba(250, 0, 0, 1);
    }
  }

  &-text {
    font-size: 12px;
    margin-left: 3px;
  }

  &-disabled {
    .zhui-checkbox-inner {
      box-shadow: inset 0px 0px 10px 10px $yuanshan !important;
    }
  }
}